<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">-->
    <title>Learn</title>
    <link rel="icon" href="//www.jd.com/favicon.ico">
    <style>
        <!--    #与id唯一绑定       -->
        #div1{
            height: 300px;
            background-color: aqua;
        }
        #div2{
            height: 300px;
            background-color: yellow;
        }
        #div3{
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <h1 id="xiaoxiao">你好前端</h1> <!--id是属性,方便定位-->
            <h2 style="color: brown">前端</h2>
    <img src="eac598733402e7feb29be302e897e2f5.jpg" width="700px" height="350px" alt="加载失败" title="风景"><br>
    <hr/><!--标横线-->
    <div id="top">hello</div> <!--块级标签-->
    <span>word</span><!--内连标签-->
    <hr>
    hello<br><!--换行-->
    word<br>
    <b>加&nbsp;&nbsp;粗</b><br>
    <em>变斜</em><br>
    <del>删除</del><br>
    <a href="http://www.baidu.com" target="_blank" title="hahahaha">百度</a><br><!--a的两个功能 1.超链接 2.锚-->
    <a href="#div1">第一章</a><br>
    <a href="#div2">第二章</a><br>
    <a href="#div3">第三章</a><br>
    <div id="div1">
        11111111
    </div>
    <div id="div2">
        22222222
    </div>
    <div id="div3">
        33333333
    </div>
    <a href="#top">返回</a>
    <ul>       <!--无序列表 unorder list-->
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
    </ul>
    <ol>       <!--有序列表 order list-->
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
    </ol>
    <dt>       <!--定义列表 define title-->
        <dd>1111111</dd>       <!--定义数据 define data-->
        <dd>2222222</dd>
        <dd>3333333</dd>
    </dt>


</body>
</html>